<template>
	<!-- 搜索框 -->
	<view class="search-input-container">
		<image
			mode="aspectFill"
			class="search-icon"
			@click="handleSearch"
			src="/static/svg-icon/search.svg" />
		<input
			type="text"
			v-model="keyword"
			class="search-input"
			:placeholder="placeholder"
			@confirm="handleSearch"
			placeholder-style="color: #ccc; font-size: 24rpx;" />
	</view>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
	name: 'SearchInput',
	props: {
		placeholder: {
			type: String,
			default: '搜索',
		},
	},
	emits: ['on-search'],
	setup(props, { emit }) {
		const keyword = ref('');

		const handleSearch = () => {
			emit('on-search', keyword.value);
		};

		return { keyword, handleSearch };
	},
});
</script>

<style lang="scss" scoped>
// 搜索框
.search-input-container {
	width: 472rpx;
	// #ifndef MP-WEIXIN
	width: 100%;
	// #endif
	height: 60rpx;
	display: flex;
	align-items: center;
	border-radius: 60rpx;
	background-color: white;

	.search-icon {
		width: 25rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}

	.search-input {
		width: 80%;
		color: #3b3b3b;
		font-weight: 500;
		font-size: 24rpx;
		text-align: left;
		margin-left: 20rpx;
	}
}
</style>
